<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <title>租房</title>
  <script src="./static/static/vue.min.js"></script>
  <script src="./static/static/axios.min.js"></script>
  <!-- 本地引入lib-master -->
  <link rel="stylesheet" type="text/css" href="./static/lib-master/theme-chalk/index.css" />
  <script src="./static/lib-master/index.js" type="text/javascript" charset="utf-8"></script>

  <style>
    body {
      font-family: 'Microsoft YaHei';
      color: #666;
      font-size: 12px;
    }

    /*顶部条状态*/
    .header_con {
      height: 29px;
      background-color: #f7f7f7;
      border-bottom: 1px solid #ddd;
    }

    .header {
      width: 1200px;
      height: 29px;
      margin: 0 auto;
    }

    .welcome {
      font: 12px/29px 'Microsoft YaHei UI';
      float: left;
    }

    .user_login {
      height: 29px;
      line-height: 29px;
      float: right;
    }

    .user_login a {
      color: #666;
    }

    .user_login a:hover {
      color: #f80;
    }

    .search_bar {
      width: 1200px;
      height: 115px;
      margin: 0 auto;
    }

    .logo {
      width: 151px;
      height: 59px;
      margin: 29px 0 0 17px;
    }

    .search_con {
      width: 616px;
      height: 38px;
      border: 1px solid #37ab40;
      margin: 34px 0 0 123px;
      /*雪碧图的放大镜作背景图*/
      background: url(../images/icons.png) 10px -335px no-repeat;
    }

    .search_con .input_text {
      width: 470px;
      height: 37px;
      border: 0px;
      margin-left: 37px;
      outline: none;
    }

    .search_con .input_btn {
      width: 100px;
      height: 38px;
      background-color: #37ab40;
      border: 0;
      font: 14px/38px 'Microsoft YaHei UI';
      color: #fff;
      /*鼠标变成手*/
      cursor: pointer;
    }

    .guest_card {
      width: 200px;
      height: 40px;
      margin-top: 34px;
    }

    .card_name {
      width: 158px;
      height: 38px;
      border: 1px solid #ddd;
      font: 14px/38px 'Microsoft YaHei UI';
      color: #37ab40;
      text-indent: 56px;
      background: url(../images/icons.png) 10px -300px no-repeat #f7f7f7;
    }

    .goods_count {
      width: 40px;
      height: 40px;
      background-color: #f80;
      font: bold 18px/40px 'Microsoft YaHei UI';
      text-align: center;
      color: #fff;
    }

    .navbar_con {
      height: 40px;
      border-bottom: 2px solid #37ab30;
      /*background: red;*/
    }

    .navbar {
      width: 1200px;
      height: 40px;
      margin: 0 auto;
      /*background: red;*/
    }

    .subnav_con h1 {
      width: 200px;
      height: 40px;
      background-color: #37ab40;
      font: 14px/40px 'Microsoft YaHei UI';
      text-align: center;
      color: #fff;
    }


    .navlist {
      overflow: hidden;
    }

    .navlist li {
      float: left;
      height: 14px;
      padding: 0 25px;
      border-left: 1px solid #666;
      margin-left: -2px;
      margin-top: 13px;
    }

    .submena {
      width: 1200px;
      height: 30px;
      margin: 0 auto;
      /*background:yellow;*/
    }

    .submena a {
      color: #37ab40;
      line-height: 30px;
    }

    .center_con {
      width: 1200px;
      height: 350px;
      margin: 0 auto;
      /*background: yellow;*/
    }

    .center_con .main_menu {
      width: 350px;
      height: 350px;
      overflow: hidden;
    }

    .goods_detail_list {
      width: 730px;
      height: 350px;
    }

    .goods_detail_list h3 {
      font-size: 24px;
      line-height: 24px;
      color: #666;
      font-weight: normal;
    }

    .goods_detail_list p {
      color: #666;
      line-height: 40px;
    }

    .prize_bar {
      height: 72px;
      background-color: #fff5f5;
      line-height: 72px;
    }

    .prize_bar .show_prize {
      font-size: 20px;
      color: #ff3e3e;
      padding-left: 20px
    }

    .prize_bar .show_pirze em {
      font-style: normal;
      font-size: 36px;
      padding-left: 10px
    }

    .prize_bar .show_unit {
      padding-left: 150px;
    }

    .goods_num {
      height: 52px;
      margin-top: 19px;
      /*background: yellow;*/
    }

    .goods_num .num_name {
      width: 70px;
      height: 52px;
      line-height: 52px;
    }

    .goods_num .num_add {
      width: 75px;
      height: 50px;
      border: 1px solid #dddddd;
    }

    .goods_num .num_add .num_show {
      width: 49px;
      height: 50px;
      text-align: center;
      line-height: 50px;
      border: 0px;
      outline: none;
      font-size: 14px;
      color: #666;
    }

    .goods_num .num_add .add,
    .goods_num .num_add .minus {
      width: 25px;
      line-height: 25px;
      text-align: center;
      border-left: 1px solid #ddd;
      border-bottom: 1px solid #ddd;
      color: #666;
      font-size: 14px;
    }

    .goods_num .num_add .minus {
      border-bottom: 0px;
    }

    .total {
      height: 35px;
      line-height: 35px;
      margin-top: 25px;
      /*background: yellow;*/
    }

    .total em {
      font-style: normal;
      color: #ff3e3e;
      font-size: 18px
    }

    .operate_btn {
      height: 40px;
      margin-top: 35px;
      font-size: 0;
      position: relative;
    }

    .operate_btn .buy_btn,
    .operate_btn .add_cart {
      display: inline-block;
      width: 178px;
      height: 38px;
      border: 1px solid #c40000;
      font-size: 14px;
      color: #c40000;
      line-height: 38px;
      text-align: center;
      background-color: #ffeded;
    }

    .operate_btn .add_cart {
      background-color: #c40000;
      color: #fff;
      margin-left: 10px;
      position: relative;
      z-index: 10;
    }

    body,
    p,
    h1,
    h2,
    h3,
    h4,
    h5,
    h6,
    ul,
    dl,
    dt,
    form,
    input {
      margin: 0;
      padding: 0;
    }

    ul {
      list-style: none;
    }

    a {
      text-decoration: none;
    }

    em {
      font-style: normal;
    }

    img {
      border: 0px;
    }

    h1,
    h2,
    h3,
    h4,
    h5,
    h6 {
      font-size: 100%;
    }

    .clearfix:before,
    .clearfix:after {
      content: "";
      display: table;
    }

    .clearfix:after {
      clear: both;
    }

    .clearfix {
      zoom: 1;
    }


    .fl {
      float: left;
    }

    .fr {
      float: right;
    }

    body {
      margin: 0;
      padding: 0px;
    }

    #carousel {
      margin: auto;
      /* 居中 */
      width: 600px;
      /* 设置宽度 */
      position: relative;
      /* 相对定位 */
      overflow: hidden;
      /* 超出隐藏 */
    }

    #carousel img {
      position: absolute;
      /* 绝对定位 使图片堆叠 */
      width: 100%;
      /* 设定大小 按比例缩放 */
      transition: all .6s;
      /* 动画 */
      opacity: 0;
      /* 隐藏 */
    }

    .imgActive {
      opacity: 1 !important;
      /* 显示图片 最高优先级 */
    }

    /* 控制按钮的样式 */
    #leftArrow,
    #rightArrow {
      position: absolute;
      left: 5px;
      top: 43%;
      width: 25px;
      height: 30px;
      background-color: #eee;
      display: flex;
      justify-content: center;
      align-items: center;
      opacity: 0.7;
      font-size: 20px;
      cursor: pointer;
      z-index: 1000;
    }

    #rightArrow {
      left: auto;
      right: 5px;
    }

    #sliderBtn {
      position: absolute;
      width: 100%;
      bottom: 0;
      display: flex;
      justify-content: flex-end;
      z-index: 1000;
    }

    .unitBtn {
      width: 10px;
      height: 10px;
      background-color: #eee;
      border-radius: 10px;
      margin: 10px;
      cursor: pointer;
    }

    .btnActive {
      background-color: #4C98F7;
    }
  </style>

  <style>
    .el-carousel__item h3 {
      color: #475669;
      font-size: 18px;
      opacity: 0.75;
      line-height: 300px;
      margin: 0;
    }

    .el-carousel__item:nth-child(2n) {
      background-color: #99a9bf;
    }

    .el-carousel__item:nth-child(2n+1) {
      background-color: #d3dce6;
    }
  </style>

</head>

<body>

  <div id='app'>
    <!-- 头部信息 -->
    <div class="header_con">
      <div class="header">
        <div class="welcome">欢迎来到租房!</div>
      </div>
    </div>
    <!-- 商品信息栏 -->
    <div class="navbar_con">
      <div class="navbar clearfix">
        <div class="subnav_con fl">
          <h1>房源详情 <i></i></h1>
        </div>
        <ul class="navlist fl">
          <li><a href="./searchRentHouse copy.html">我的发布</a></li>
          <!-- <li><a href="">手机生鲜</a></li>
            <li><a href="">抽奖</a></li> -->
        </ul>
      </div>
    </div>
    <!-- 轮播图容器 -->

    <div class="center_con clearfix">
      <div class="main_menu fl">
        <img :src="house.defaultImg" width="350px" height="450px">
      </div>

      <div class="goods_detail_list fr">
        <h3 v-html="house.houseAddress">大兴大棚草莓</h3>
        <p v-html="house.houseName">草莓浆果柔软多汁，味美爽口，适合速冻保险贮藏，草莓速冻后，可以保持原有的色、香、味，既便于贮藏，又便于外销。</p>
        <div class="prize_bar">
          <div class="show_prize fl">￥<em v-html="house.housePrice+'/月'">16.80</em></div>
          <div class="show_unit fl">单位：1套</div>
        </div>
        <br>

        <div class="total">面积：<em style="color: #666;">{{house.houseArea}}平 </em></div>

        <div class="total">房屋类型：<em style="color: #666;">{{house.houseDesc}}</em></div>

        <div class="total">是否出租：<em style="color: #666;" v-html="house.status==1?'已租':'未租'"></em></div>
        <div class="total">起租月份：<em>1月</em></div>
        <div class="total">总价：<em>16.80元</em></div>
        <div class="operate_btn">
          <a href="" class="add_cart">租房</a>
          <button class="add_cart" @click="upup()">设置置顶</button>
        </div>
      </div>
      <div class="main_menu fl">
        <el-carousel trigger="click">
          <el-carousel-item style="width: auto; height: auto;" v-for="item in imgList" :key="item">
            <el-image style="width: auto; height: auto;" :src="item.imgUrl"></el-image>
          </el-carousel-item>
        </el-carousel>
      </div>
    </div>

    <script>
      new Vue({
        el: '#app',
        data: {
          url: "http://localhost:8888/api",
          house: {},
          imgList: [],
        },
        //方法集合
        methods: {
          upup () {
            this.$confirm('将花费1200进行置顶, 是否继续?', '置顶', {
              confirmButtonText: '确定',
              cancelButtonText: '取消',
              type: 'warning'
            }).then(() => {
              console.log(id);
              axios.get(`${this.url}/es/upup/${id}`).then(({ data }) => {
                if (data && data.code === 0) {
                  console.log(data)
                  this.$message({
                    type: 'success',
                    message: '置顶成功!'
                  });
                  location = "./searchRentHouse copy.html"

                } else {
                  this.$message.error(data.msg)
                }
              })

            }).catch(() => {
              this.$message({
                type: 'info',
                message: '已取消'
              });
            });

          },
          init (id) {
            axios.post(`${this.url}/house/renthouse/info/${id}`).then(({ data }) => {
              console.log(data)
              this.house = data.rentHouse
            })
          },
          getImg (id) {
            axios({
              url: `${this.url}/house/rentimg/list`,
              method: 'get',
              params: ({
                'houseId': id
              })
            }).then(({ data }) => {
              if (data && data.code === 0) {
                this.imgList = data.page.list
              } else {
                this.imgList = []
              }
              this.dataListLoading = false
            })
          }
        },
        created () {
          id = localStorage.getItem("id");
          this.init(id)
          this.getImg(id)
        },

      })
    </script>


  </div>

</body>

</html>